<template>
  <div class = "boutique" v-infinite-scroll = "test1" infinite-scroll-distance = '1'>
    <!--精品歌单标题-->
    <el-row>
      <el-col>
        <div class = "boutique-title-container">
          <h1>精品歌单</h1>
          <CategoryPopoverTwoLayer :navList = "navList"
                                   :selectedTagId = "selectedTagId" :placement = "0"
          />
        </div>
      </el-col>
    </el-row>
    <!--精品歌单列表-->
    <el-row>
      <el-col>
        <el-space :size = "10" wrap>
          <div class = "boutique-item" v-for = "item in 14 " :key = "item">
            <el-image style = "width: 150px; height: 150px" :src = "logo" />
            <div class = "boutique-item-content">
              <div class = "boutique-item-content-top">
                <span class = "song-list-name">东风菱赛反风机房烤面占凡注明</span>
                <span class = "song-list-author">赛复赛按高标准</span>
              </div>
              <div class = "row-container" style = "align-items: center;">
                <el-space :size = "0" spacer = "/">
                  <span>玩儿赛制</span>
                  <span>玩儿赛制</span>
                </el-space>
                <span class = "description">塞缝八珍糕</span>
              </div>

            </div>
          </div>
        </el-space>
      </el-col>
    </el-row>
  </div>

</template>

<script setup>
import CategoryPopoverTwoLayer from '@/components/reuse/CategoryPopoverTwoLayer'
import logo from '@/assets/logo.png'
import {ref} from "vue";

function test1() {
  console.log(1)
}

let selectedTagId = ref(1)
const navList = [
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      },
      {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
  {
    category1Name: '语种',
    category1List: [
      {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }, {
        category2Id: 1,
        category2Name: '华语',
      }
    ]
  },
]
// 写一个自定义事件，父给子传方法（function）子给父传参数。父亲执行方法，获取数据展示数据。

</script>

<style lang = "less" scoped>
.boutique {

  :deep(.el-row) {
    margin-bottom: 10px;
    width: 100%;

    .boutique-item {
      display: flex;

      .boutique-item-content {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: 30px 10px;
        width: 200px;

        .boutique-item-content-top {
          display: flex;
          flex-direction: column;

          .song-list-name {
            font-size: 14px;
            padding: 6px 0;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

          .song-list-author {
            font-size: 8px;
            color: #989696;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }

        }

        .el-space {
          border: 1px solid var(--main-color-background);
          background-color: var(--main-color-background);

          .el-space__item > * {
            padding: 0 1px;
            font-size: 4px;
          }
        }

        .description {
          margin-left: 5px;
          font-size: 6px;
          color: #989696;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
        }
      }


    }
  }
}

.boutique-title-container {
  display: flex;
  justify-content: space-between;
}
</style>